<template>
	<view>
		<TopNav title="确认下单"></TopNav>
		<view class="main">
			<view class="radius bg-white flex justify-between p-10 m-b10" v-for="item in form.goods_list || []"
				:key="item.id">
				<view class="flex shrink-0">
					<image :src="item.image || '/static/logo.png'" class="width-80 height-80 shrink-0 bg-gray radius"
						mode=""></image>
					<view class="flex flex-direction justify-start p-l16">
						<text class="f-s16 m-t5 f-w600">{{item.name}}</text>
						<view class="m-t25">
							<text class="text-theme f-s18 text-bold">{{item.price}}</text>
							<text class="p-l3 text-grey">/{{item.unit}}</text>
						</view>
					</view>
				</view>
				<view class="self-end">
					<text class="f-s16 text-bold">×{{item.num}}</text>
				</view>
			</view>
			<view class="" @click.stop="handleToAddress">
				<view class="flex justify-between align-center bg-white radius p-15">
					<view class="" v-if="form.address && form.address.id">
						<view class="flex-1 p-lr10 f-s16">
							<view class="flex">
								<text class="f-s16 f-w600">{{form.address.realname}}</text>
								<text class="p-l8">{{form.address.mobile}}</text>
							</view>
							<view class="m-t8">
								<text>{{form.address.province}}{{form.address.city}}{{form.address.district}}{{form.address.address}}</text>
							</view>
						</view>
					</view>
					<view class="" v-else>
						<text class="text-grey f-s16 f-w400">选择收货地址</text>
					</view>
					<image src="/static/images/index/more.png" class="height-20 width-20 shrink-0" mode=""></image>
				</view>
			</view>
		
			<view class="bg-white radius m-t10 p-12">
				<view class="">
					<text class="f-w600 f-s15 line-height24">支付方式</text>
				</view>
				<view class="m-t10">
					<view class="radio-item" :class="{'radio-check':payWay === 1}" @click="payWay = 1">
						<view class="flex align-center">
							<image src="/static/images/mine/menu/shopping/pay.png" class="width-24 height-24" mode="">
							</image>
							<view class="flex flex-direction p-l12">
								<text class="text-bold f-s15">余额支付（￥{{form.balance || 0.00}}）</text>
								<text class="text-gray f-s12 m-t4">使用余额支付</text>
							</view>
						</view>
						<image src="/static/images/index/radio-check.png" class="width-20 height-20" mode=""
							v-if="payWay === 1"></image>
						<image src="/static/images/index/radio.png" class="width-20 height-20" mode="" v-else></image>
					</view>
					<!-- <view class="radio-item m-t10" :class="{'radio-check':payWay === 2}" @click="payWay = 2">
						<view class="flex align-center">
							<image src="/static/images/mine/menu/shopping/wechat-pay.png" class="width-24 height-24"
								mode=""></image>
							<view class="flex flex-direction p-l12">
								<text class="text-bold f-s15">微信支付</text>
								<text class="text-gray f-s12 m-t4">使用微信支付</text>
							</view>
						</view>
						<image src="/static/images/index/radio-check.png" class="width-20 height-20" mode=""
							v-if="payWay === 2"></image>
						<image src="/static/images/index/radio.png" class="width-20 height-20" mode="" v-else></image>
					</view> -->
				</view>
			</view>
		</view>
		<view class="flex align-center justify-between bg-white toolbar">
			<view class="flex align-center">
				<view class="text-theme flex align-baseline ">
					<text class="f-s15 text-grey f-w400">合计金额</text>
					<text class="p-l12">￥</text>
					<text class="f-s22">{{form.pay_money || 0}}</text>
				</view>

			</view>
			<view class="order-btn" hover-class="pressed" @click="handleSubmit">
				<text>提交订单</text>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		orderCreate,
		orderPay,
		orderPayStatus
	} from "@/api/mine/shopping.js"
	export default {
		data() {
			return {
				radioCurrent: 0,
				form: {},
				payWay: ''
			}
		},
		onLoad(query) {
			this.form = JSON.parse(decodeURIComponent(query.info))
			uni.$on('addressSelect', this.handleAddressSelect)
		},
		onUnload() {
			uni.$off('addressSelect', this.handleAddressSelect)
		},
		methods: {
			// 订单支付
			handleOrderPay(order_sn) {
				this.$modal.loading("正在支付").then(() => {
					let params = {
						order_sn,
						pay_way: this.payWay,
						form: 'matter'
					}
					orderPay(params).then(res => {
						this.$modal.closeLoading()
						this.$toast(res.msg)
						// 支付成功，关闭当前页跳转订单页
						this.$tab.redirectTo('order')
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleSubmit() {
				if(!this.form.address?.id){
					this.$toast('请选择收货地址')
					return
				}
				this.$modal.loading("正在创建订单").then(() => {
					let goods = this.form.goods_list.map(item => {
						return {
							id: item.id,
							num: item.num,
							price: item.price
						}
					})
					let params = {
						address_id: this.form.address.id,
						goods
					}
					orderCreate(params).then(res => {
						// 创建订单成功，商品结算页刷新
						uni.$emit('refresh', true)
						this.handleOrderPay(res.data)
					}).catch(() => this.$modal.closeLoading())
				})
			},
			// 监听地址选择
			handleAddressSelect(selected) {
				let {
					id,
					realname,
					mobile,
					province,
					city,
					district,
					address
				} = selected
				this.form.address.id = id
				this.form.address.realname = realname
				this.form.address.mobile = mobile
				this.form.address.province = province
				this.form.address.city = city
				this.form.address.district = district
				this.form.address.address = address
			},
			handleToAddress() {
				console.log('cccccccc: ');
				this.$tab.navigateTo('address?id=' + this.form?.address?.id ?? '')
			}
		}
	}
</script>
<style>
	page {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
	}
</style>
<style lang="scss" scoped>
	.main {
		padding: 20rpx 32rpx;
	}

	.radio-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;
		border: 2rpx solid #e6e9ef;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.radio-check {
		border-color: #595959;
	}

	.toolbar {
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		position: fixed;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));

		.order-btn {
			width: 200rpx;
			height: 80rpx;
			background-color: #FE3F59;
			color: #fff;
			border-radius: 60rpx;
			font-weight: 400;
			font-size: 26rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>